<template>
  <div class="join">
    <div class="joinUS-container">
      <div class="login-head">
        <img src="https://liyun-oss1.oss-cn-beijing.aliyuncs.com/superb-class/image/assets/xyzh.png?versionId=CAEQGBiBgMCs1PyZ5hciIDY1Yzk1NmM1Zjc5NzQzMDE4ODE4MTFmNjRjYmZlNzc1" />
      </div>
      <el-form
        class="join-form"
        ref="form"
        size="mini"
        :model="userInfo"
        :rules="rules"
        hide-required-asterisk
      >
        <el-row>
          <el-col :span="24">
            <div class="join-title"><h2>加入我们</h2></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item prop="name" class="join-inputbox">
              <el-input
                v-model="userInfo.name"
                placeholder="姓名"
                class="join-input"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item prop="grade" class="join-inputbox">
              <el-input
                v-model="userInfo.grade"
                placeholder="专业班级"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item prop="sno" class="join-inputbox">
              <el-input v-model="userInfo.sno" placeholder="学号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item prop="contact" class="join-inputbox">
              <el-input
                v-model="userInfo.contact"
                placeholder="联系方式"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item prop="introduction" class="join-textarea">
              <el-input
                type="textarea"
                v-model="userInfo.introduction"
                placeholder="自我简介"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <div class="join-title">
                <el-button size="big" type="warning" @click="submitForm('form')"
                  >提交</el-button
                >
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row> </el-row>
      </el-form>
    </div>
    <div class="main">
        <span ></span>
        <span></span>
        <span></span>
        <div class="text">
            小柚智汇 小有智慧<br>
            在这<br>
            -柚子周报-<br>
            带你看看大佬的笔记<br>
            -柚子时光-<br>
            随时记录你的学习时刻<br>
            -柚子笔记-<br>
            快速传输文件<br>
            官网，移动端，app<br>
            随时同步数据<br>
            欢迎加入柚子的大家庭<br>
            成为柚子的一员哟<br>
        </div>
    </div>
  </div>
</template>

<script>
import { join } from '@/utils/api/visitor'
export default {
  name: 'joinUs',
  props: {},
  components: {},
  methods: {
    submitForm (formName) {
      // validate 对整个表单进行校验，参数为一个回调函数
      this.$refs[formName].validate(isPass => {
        if (isPass) {
          // 校验成功
          // 在这里提交
          // 发起post请求
          this.joinUs()
        } else {
          return false
        }
        // 刷新表单
        this.$nextTick(() => {
          this.$refs.form.resetFields()
        })
      })
    },
    joinUs () {
      join(this.userInfo)
        .then(res => {
          if (res.data.code === 200) {
            // 成功
            this.$notify({
              title: '成功',
              message: '提交成功，请耐心等待消息',
              type: 'success'
            })
          } else {
            this.$notify.error({
              title: '失败',
              message: '提交失败！请重试'
            })
          }
        })
        .catchr(() => {
          this.$notify.error({
            title: '失败',
            message: '提交失败！请重试'
          })
        })
    }
  },
  data () {
    return {
      // 数据
      userInfo: {
        name: '',
        grade: '',
        sno: '',
        contact: '',
        introduction: ''
      },
      classInfo: ['qweqwe', 'oikikik', 'dfsdfsd', 'vxcvvzxdv'],
      // 表单验证规则
      rules: {
        name: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入姓名'
          }
        ],
        grade: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入专业班级'
          }
        ],
        sno: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入学号'
          }
        ],
        introduction: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入简介'
          }
        ],
        contact: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入联系方式'
          }
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.join {
  margin-top: 85px;
  background: url('https://liyun-oss1.oss-cn-beijing.aliyuncs.com/superb-class/image/assets/image/bg.png?versionId=CAEQGBiBgICX1PyZ5hciIDI4M2ZjZTM5MzQ5ZjRmNmRhYmYyOTY3MDM1ZWNhMDg3') no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  .join-title {
    text-align: center;
  }
  .joinUS-container {
    width: 600px;
    position: relative;
    left: -300px;
    .login-head {
      height: 130px;
      width: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 0 10px #ddd;
      position: absolute;
      top: -80px;
      left: -50px;
      z-index: 666;
      background-color: #fff;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
  /deep/.el-form-item__error {
    padding-top: 5px;
    padding-left: 10px;
  }
  .join-inputbox {
    .text {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0 10px;
      display: block;
      transition: 0.5s;
      pointer-events: none;
    }
  }
  /deep/.el-col-10,
  /deep/.el-col-20 {
    border-bottom: 1px solid #aaa;
    padding: 0;
    margin-left: 15px;
    margin-right: 30px;
  }
  /deep/.el-row {
    margin-bottom: 25px;
  }
}

/deep/.el-textarea__inner,
/deep/ .el-input__inner {
  &::placeholder {
    color: #ff8c00;
    font-size: 16px;
  }
  background-color: transparent;
  color: #000;
}
/deep/.el-textarea__inner {
  height: 100px;
  border-color: #aaa;
  margin-left: 10px;
}

/deep/ .el-input__inner {
  border: none;
  padding: 0 10px;
  z-index: 1;
}
/deep/.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 0;
  margin-left: -10px;
}
.el-row {
  margin-bottom: 15px;
}
.join-form {
  position: relative;
  min-width: 300px;
  max-width: 600px;
  height: 24em;
  background: rgba(243, 238, 238, 0.6);
  padding: 10px;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  transition: all 2s;
}
.join-form:hover {
  background: rgba(243, 238, 238, 0.9);
}
.main{
    width:400px;
    height:400px;
    position: absolute;
    left: 75%;
    top: 50%;
    transform: translate(-50%,-50%);
    span:nth-child(1){
      border-radius: 100px 190px  150px 200px;
      animation:roll 5s linear infinite alternate;
    }
    span:nth-child(2){
        border-radius: 90px 180px 100px 190px;
        animation:roll 6s linear infinite alternate;
    }
    span:nth-child(3){
        border-radius: 180px 150px 90px 130px;
        animation:roll 5s linear infinite alternate;
    }
  }
.main .text{
    color:white;
    width:200px;
    height:200px;
    position: absolute;
    font-size: 17px;
    line-height: 25px;
    left:50%;
    top:40%;
    transform: translate(-50%,-50%);
}
.main span{
    position: absolute;
    width:100%;
    height:100%;
    background:rgba(230, 126, 34,0.4);
    z-index:-1;
    transition: 0.8s linear;
}
@keyframes roll{
    100%{
        transform: rotateZ(360deg);
    }
}
.main:hover span{
    background:none;
    border:2px solid white;
}
</style>
